<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>HOSPITAL</title>
    <script src="../static/js/jQuery.min.js" charset="utf-8"></script>
    <script src="../static/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="../static/vue/vue.min.js"></script>
    <script src="../static/vue/vue-tables-2.min.js"></script>


    <link rel="stylesheet" href="../static/css/bootstrap.min.css">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style media="screen">
        .margin-top-5{margin-top: 5px;}
        .padding-side-100{padding-left: 100px;padding-right: 100px;}
    </style>

</head>
<body>
<div class="container-fluid" id="master-page">

    <!-- main view -->
    <div class="row text-center">
        <h1>IRS节点 - 发布产品</h1>
    </div>
    <div class="row margin-top-5 padding-side-100">
        <div class="col-md-12 well">
            <div class="col-xs-6">
                <span>hospital - 医院节点ID:: </span>
            </div>
            <div class="col-xs-3">
                <span><input type="text" class="form-control" v-model="new_data.hospital" placeholder="hid1,hid2...10:: 0x00......" :disabled="true"></input></span>
            </div>
            <div class="col-xs-3">
                <span>{{map.hospital[new_data.hospital]}}</span>
            </div>
        </div>
        <div class="col-md-12 well">
            <div class="col-xs-6">
                <span>patient - 病人ID:: </span>
            </div>
            <div class="col-xs-3">
                <span><input type="text" class="form-control" v-model="new_data.patient" placeholder="pid:: 0x01......"></input></span>
            </div>
            <div class="col-xs-3">
                <span>{{map.patient[new_data.patient]}}</span>
            </div>
        </div>
        <div class="col-md-12 well">
            <div class="col-xs-6">
                <span>doctor - 医生ID:: </span>
            </div>
            <div class="col-xs-6">
                <span><input type="text" class="form-control" v-model="new_data.doctor" placeholder="did:: 0x02......"></input></span>
            </div>
        </div>
        <div class="col-md-12 well">
            <div class="col-xs-6">
                <span>diagnose - 诊断:: </span>
            </div>
            <div class="col-xs-6">
                <span><input type="text" class="form-control" v-model="new_data.diagnose" placeholder="freetext"></input></span>
            </div>
        </div>
        <!-- <div class="col-md-12 well">
          <div class="col-xs-6">
            <span>prescription ID:: </span>
          </div>
          <div class="col-xs-6">
            <span><input type="text" class="form-control" v-model="new_data.prescription_ID" placeholder="generate automated"></input></span>
          </div>
        </div>
        <div class="col-md-12 well">
          <div class="col-xs-6">
            <span>policy:: </span>
          </div>
          <div class="col-xs-6">
            <span><input type="text" class="form-control" v-model="new_data.policy" placeholder="xx"></input></span>
          </div>
        </div> -->
        <div class="col-md-12 well">
            <div class="col-xs-6">
                <span>prescription content - 处方内容:: </span>
            </div>
            <div class="col-xs-6">
                <span><button class="btn btn-sm btn-success btn-block" @click="addDrug('call')"><span class="glyphicon glyphicon-plus"></span></button></span>
            </div>
            <div class="col-xs-12 margin-top-5">
                <div class="col-xs-3 margin-top-5" v-for="(v, k) in new_data.prescription_content"><button class="btn btn-warning btn-md btn-block">{{chemistry[v.chemistry_name]}} {{v.chemistry_name}} <span class="badge">{{v.amount}}</span></button></div>
            </div>
        </div>
    </div>

    <div class="row margin-top-5 padding-side-100">
        <div class="col-md-12">
            <el-button
                    type="primary"
                    @click="publish()"
                    v-loading.fullscreen.lock="busy">
                publish
            </el-button>
            <!-- <button
            class="btn btn-info btn-block btn-lg"
            @click="publish()"
            v-show="!busy"
            v-loading.fullscreen.lock="fullscreenLoading"
            >publish</button>
            <button class="btn btn-info btn-block btn-lg" @click="publish()" v-show="busy">publish</button> -->
        </div>
    </div>

    <!-- modal -->
    <div class="modal fade" tabindex="-1" role="dialog" id="Add_Drug_Modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Add Drug - 添加药品</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 margin-top-5">
                            <select class="form-control" v-model="new_drug.name">
                                <option :value="k" v-for="(v,k) in chemistry">{{v}} - {{k}}</option>
                            </select>
                            <!-- <input type="text" class="form-control" v-model="new_drug.name" placeholder="drug name"> -->
                            <!-- <input type="text" class="form-control" v-model="new_drug.name" placeholder="drug name"> -->
                        </div>
                        <div class="col-md-6 margin-top-5">
                            <input type="number" class="form-control" v-model="new_drug.qty" placeholder="drug quantity">
                        </div>
                        <div class="col-md-6 margin-top-5" v-show="false">
                            <input type="text" class="form-control" v-model="new_drug.remark" placeholder="remark">
                        </div>
                        <div class="col-md-6 margin-top-5" v-show="false">
                            <input type="text" class="form-control" v-model="new_drug.usage" placeholder="drug usage">
                        </div>
                    </div>
                </div>
                <div class="modal-footer margin-top-5">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" @click="addDrug()" :disabled="new_drug.name==''||new_drug.qty<1">Finish</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>

</body>

<!-- map for  chinese name -->
<script src="../static/info/map.js" charset="utf-8"></script>
<!-- vue -->
<script>
    // var ServerIP = window.location.host
    var ServerIP = "localhost:"+window.location.port

    Vue.use(VueTables.ClientTable);
    var app = new Vue({
        el: '#master-page',
        data: function(){
            return {
                chemistry: chemistry,
                edit_flag: false,
                new_data:{
                    hospital:"hid1",
                    patient:"patientid1",
                    doctor:"did1",
                    diagnose:"fever",
                    time:"",
                    prescription_ID:"",
                    prescription_content:[],
                },
                new_drug:{
                    name:"",
                    qty: 1,
                    remark: "",
                    usage: "",
                },
                busy: false,
                map: {
                    medicine:   medicine,
                    hospital:   hospital,
                    chemistry:  chemistry,
                    store:      store,
                    patient:    patient,
                },
            }
        },
        methods: {
            func: function(){
                var _this = this;
                var postData = {};
                postData["receiver"] = 999;
                console.log(postData)
                $.post("...",postData,function(data,status){
                    if (status=="success") {
                        console.log(data)
                    }else{alert("Error!Code: "+status);}
                });
                return;
            },
            addDrug: function(aux){
                if (aux=="call") {
                    this.new_drug = this.blankDrug()
                    $("#Add_Drug_Modal").modal("show"); return;
                }
                var tmp = {}
                tmp.chemistry_name = this.new_drug.name
                tmp.amount = parseInt(this.new_drug.qty)

                this.new_data.prescription_content.push(tmp)

                $("#Add_Drug_Modal").modal("hide"); return;
            },
            getDrugList: function(){
                return 0
            },
            getOneDrugInfo: function(){
                return 0
            },
            getHospitalList: function(){
                return 0
            },
            generatePrescriptionID: function(){
                return 0
            },
            publish: function(){
                let _this = this
                _this.busy = true
                var postData = {
                    "hospital_id":this.new_data.hospital,
                    "patient_id":this.new_data.patient,
                    "ts":(new Date()).getTime(),
                    "doctor_id":this.new_data.doctor,
                    "disease":this.new_data.diagnose,
                    "chemistrys":this.new_data.prescription_content,
                    "policy":"hid1 OR (Cid AND Rid1)",
                }
                console.log(postData);

                $.ajax({
                    type: 'POST',
                    url: "http://" + ServerIP + "/hospitalsendprescription",
                    data: JSON.stringify(postData),
                    success: function(result){
                        console.log(result);
                        _this.busy = false
                        alert("success")
                        location.reload()
                        //code:: notice hospital the result.
                    },
                    dataType: "json"
                });
                return 0
            },
            // util functions
            blankDrug: function(){
                return {
                    name:"",
                    qty: 1,
                    remark: "",
                    usage: "",
                }
            },
        },
        computed: {
        },
        created(){
            // this.fetch_person_info();
            // this.fetch_history_record();
        }
    });
</script>
</html>
